<template>
  <el-dialog :title="isEdit ? '编辑房间' : '添加房间'" :visible="dialogVisible" width="30%" :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
      <el-form-item label="楼栋" prop="buildingid">
        <el-cascader
          size="small"
          :value="buildingValue"
          :options="buildingOptions"
          @change="handleBuildingChange"
          :props="{ value: 'id', label: 'name' }"
          clearable
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="房间号" prop="houseno">
        <el-input v-model="ruleForm.houseno" placeholder="请输入房间号"></el-input>
      </el-form-item>
      <el-form-item label="面积" prop="areas">
        <el-input v-model.number="ruleForm.areas" placeholder="请输入面积"></el-input>
      </el-form-item>
      <el-form-item label="房间类型" prop="type">
        <el-input v-model="ruleForm.type" placeholder="请输入房间类型，如：三室二厅"></el-input>
      </el-form-item>
      <el-form-item label="朝向" prop="orientation">
        <el-select v-model="ruleForm.orientation" placeholder="请选择朝向" clearable>
          <el-option v-for="item in orientationOptions" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit('ruleForm')">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { housesdeleteadd } from '../api/administrator'
import { list } from '../api/building'

export default {
  name: 'DialogHouse',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    editData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      buildingValue: [],
      buildingOptions: [],
      orientationOptions: ['朝南', '朝东', '朝北', '朝西'],
      ruleForm: {
        id: 0,
        buildingid: '',
        houseno: '',
        areas: '',
        type: '',
        orientation: '',
      },
      rules: {
        buildingid: [{ required: true, message: '请选择楼栋', trigger: 'change' }],
        houseno: [{ required: true, message: '请输入房间号', trigger: 'blur' }],
        areas: [
          { required: true, message: '请输入面积', trigger: 'blur' },
          { type: 'number', message: '面积必须为数字值' },
        ],
        type: [{ required: true, message: '请输入房间类型', trigger: 'blur' }],
        orientation: [{ required: true, message: '请选择朝向', trigger: 'change' }],
      },
    }
  },

  watch: {
    editData: {
      handler(newVal) {
        if (newVal && Object.keys(newVal).length > 0) {
          this.ruleForm = { ...newVal }
          // 设置楼栋值
          this.buildingValue = [newVal.buildingid]
        } else {
          this.resetForm()
        }
      },
      immediate: true,
    },
  },

  created() {
    this.getBuildingList()
  },

  methods: {
    async getBuildingList() {
      try {
        let {
          data: { list: listData },
        } = await list({ pid: '' })
        this.buildingOptions = listData
      } catch (error) {
        console.error('获取楼栋列表失败:', error)
      }
    },

    handleBuildingChange(value) {
      this.buildingValue = value
      this.ruleForm.buildingid = value.length ? value[value.length - 1] : ''
    },

    handleClose() {
      this.$emit('handleCancel', false)
    },

    handleCancel() {
      this.$emit('handleCancel', false)
    },

    resetForm() {
      this.ruleForm = {
        id: 0,
        buildingid: '',
        houseno: '',
        areas: '',
        type: '',
        orientation: '',
      }
      this.buildingValue = []
    },

    handleSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            await housesdeleteadd(this.ruleForm)
            this.$message.success(this.isEdit ? '编辑成功' : '添加成功')
            this.resetForm()
            this.$emit('refreshList')
          } catch (error) {
            console.error('操作失败:', error)
            this.$message.error(this.isEdit ? '编辑失败' : '添加失败')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>

<style lang="less" scoped></style>
